<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title>资源页面</title>
		<link type="text/css" rel="stylesheet" href="../static/css/layui.css" />
		<style>
			body {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				background-color: #f2f3f5;
			}
			
			.outerLayer{
				padding: 30px; 
				justify-content: center;
			}

			.bg {
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<input type="hidden" id="source" th:value="${list}" />
		<div class="layui-bg-gray outerLayer">
			<div class="layui-row">
				<div class="layui-col-md10 layui-col-md-offset1">
					<div class="layui-card">
						<div class="bg">
							<div class="layui-btn-group demoTable">
								<button class="layui-btn" id="addData" onclick="addData()">
									添加数据源
								</button>
							</div>
							<table id="table" lay-filter="table"></table>
						</div>
						<script type="text/html" id="barDemo">
							<a class="layui-btn layui-btn-xs" lay-event="edit">连 接</a>
							<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
						</script>
					</div>
				</div>
			</div>
		</div>

		<script type="text/javascript" src="../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../static/js/layui.js"></script>
		<script>
			var sources;
			var layer, $;
			layui.use(["layer", "table"], function() {
				var table = layui.table;
				$ = layui.jquery;
				layer = layui.layer;

				sources = $("#source").val();
				var tableData = [];
				if (sources != "" && sources != "[]") {
					tableData = JSON.parse(sources);
				}

				table.render({
					elem: "#table",
					data: tableData,
					// ,url: '../../demo/table/user/-page=1&limit=30.js' //数据接口
					page: false, //关闭分页
					cols: [
						[{
							field: "type",
							title: "数据库类型",
							width: 180,
							sort: false,
						}, {
							field: "name",
							title: "数据库名称",
							width: 180,
							sort: false,
						}, {
							field: "url",
							title: "数据库地址",
							sort: false,
						}, {
							fixed: "right",
							title: "操作",
							toolbar: "#barDemo",
							width: 180,
						}, ],
					],
					even: true,
				});

				//监听行工具事件
				table.on("tool(table)", function(obj) {
					var data = obj.data;
					if (obj.event === "edit") {
						$.ajax({
							url: "/connect/db?dbName=" + data.name,
							async: false, //同步方式发送请求，true为异步发送
							type: "GET",
							data: {},
							dataType: "json",
							success: function(result) {
								if (result.code == 200) {
									layer.msg("连接成功!");
									window.location.href = "/get/table?dbName=" + data.name;
								}
							},
							error: function() {
								layer.msg("连接失败,请检查连接信息");
							}
						});
					} else if (obj.event === "del") {
						remove(data.name);
					}
				});
			});

			function addData() {
				window.location.href = "/index";
			}

			function remove(name) {
				$.ajax({
					url: "/remove?dbName=" + name,
					async: false, //同步方式发送请求，true为异步发送
					type: "GET",
					data: {},
					dataType: "json",
					success: function(result) {
						if (result.code == 200) {
							layer.msg("删除成功");
							window.location.reload();
						} else {
							layer.msg("删除失败");
						}
					},
				});
			}
		</script>
	</body>
</html>
